<template>
  <div class="bc">
    <selectHead @showDev="showDev" @changeChild="changeChild" showAll="true" closed="false"></selectHead>
    <selectDev :devList="devList" :isShow="isShow" @changeShow="changeShow" showAll="true"  ></selectDev>
    <span class="date-time">时间:</span>
    <yd-datetime  class="date-time clear-margin" type="month" v-model="dataTime1" :callback="callback" ref="dateTime"></yd-datetime>
    <yd-button class="timeChoose" size="large" @click.native="openDataTime">筛选</yd-button>
    <chart :msg="flowMsg"></chart>
  </div>
</template>

<script>
import selectHead from '../../components/common/select'
import selectDev from '../../components/common/selectDev'
import chart from '../../components/chart/chart'
import {VXDEVLIST, USEFLOW, PLACEFLOW, DEVFLOW} from '../../api/request'
import {Toast} from 'vue-ydui/dist/lib.rem/dialog'
export default {
  name: 'index',
  data () {
    return {
      clientHeight: document.documentElement.clientHeight,
      devList: [],
      isShow: false,
      placeCode: '',
      devId: '',
      flowMsg: [],
      dataTime1: ''
    }
  },
  components: {selectHead, selectDev, chart},
  mounted () {
    let nowDate = new Date()
    this.dataTime1 = nowDate.getFullYear() + '-' + (1 + nowDate.getMonth())
  },
  methods: {
    callback: function () {
      if (this.placeCode === '' || this.placeCode === 'all') {
        USEFLOW(this.$store.getters.uid, this.dataTime1).then(res => {
          if (res.data.code === 200) {
            this.flowMsg = res.data.data
          } else {
            Toast(res.data.msg)
          }
        })
      } else if (this.placeCode !== '' && this.devId !== '' && this.devId !== 'all') {
        DEVFLOW(this.devId, this.dataTime1).then(res => {
          if (res.data.code === 200) {
            this.flowMsg = res.data.data
          } else {
            Toast(res.data.msg)
          }
        })
      } else {
        PLACEFLOW(this.placeCode, this.dataTime1).then(res => {
          if (res.data.code === 200) {
            this.flowMsg = res.data.data
          } else {
            Toast(res.data.msg)
          }
        })
      }
    },
    openDataTime: function () {
      this.$refs.dateTime.open()
    },
    changeChild: function () {
      this.isShow = false
    },
    showDev: function (code) {
      this.placeCode = code
      if (code !== 'all') {
        VXDEVLIST(this.$store.state.user.userId, code).then(
          res => {
            if (res.data.code === 200) {
              this.devList = res.data.data
              this.isShow = true
            } else {
              Toast(res.data.msg)
            }
          }
        )
      } else {
        USEFLOW(this.$store.getters.uid, this.dataTime1).then(res => {
          if (res.data.code === 200) {
            this.flowMsg = res.data.data
          } else {
            Toast(res.data.msg)
          }
        })
      }
    },
    changeShow: function (devId) {
      this.isShow = !this.isShow
      this.devId = devId
      if (devId === 'unChange') {
        return
      }
      if (devId === 'all') {
        PLACEFLOW(this.placeCode, this.dataTime1).then(res => {
          if (res.data.code === 200) {
            this.flowMsg = res.data.data
          } else {
            Toast(res.data.msg)
          }
        })
      } else {
        DEVFLOW(this.devId, this.dataTime1).then(res => {
          if (res.data.code === 200) {
            this.flowMsg = res.data.data
          } else {
            Toast(res.data.msg)
          }
        })
      }
    }
  }
}
</script>

<style scoped>
  .bc{
    font-size: 0
  }
  .date-time{
    font-size: 0.32rem;
    color: #333333;
    display: inline;
    padding-left: 0.2rem;
    line-height: 1.02rem;
    margin-left: 2rem;
  }
  .clear-margin{
    margin-left: 0.2rem;
  }
  .timeChoose {
    width: 1rem;
    height: 0.42rem;
    border-radius:10%;
    font-size: 0.3rem;
    color: #129cfd;
    background-color: #fff;
    line-height: 0.42rem;
    text-align: center;
    float: right;
    margin-right: 0.4rem;
    margin-top: 0.3rem;
    outline: none;
    border: solid 1px #00c0f8;
    border-radius: 0.1rem;
  }
</style>
